<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello</title>
</head>
<body>

<div id="root"></div>

<script src="../lib/react.js"></script>
<script src="../lib/react-dom.js"></script>

<script>
  class App extends React.Component {

    constructor() {
      super();
    }
    //React利用ReactElement对象组成了一个JavaScript的对象树
    //JavaScript的对象树就是虚拟DOM(Virtual DOM)
    //JSX代码 -> ReactElement对象（虚拟DOM） -> 真实DOM

    /*
    
      虚拟DOM存在的意义：

      1.优化渲染过程
        使用diff算法，比较新旧虚拟DOM，决定哪些部分需要更新，哪些部分不需要更新
        diff算法：更高效地通过对比新旧vDom的不同来找出真正的dom的变化之处，
        即通过计算两次vDom之间真正发生变化的那一部分，并只针对有变化的这一部分进行Dom操作，而不是重新渲染整个的html页面。

      2.跨平台桥接：
        web端：
        jsx -> createElement函数 -> ReactElement(对象树) -> render() -> 映射到真实DOM
        ReactNative：
        jsx -> createElement函数 -> ReactElement(对象树) -> render() -> 映射到原生安卓/IOS控件

      3.虚拟DOM帮助我们从命令式编程转到了声明式编程的模式

    */
    render() {
      const element = React.createElement ( "div", null,
        React.createElement("div", { className: "header"}, "Header"),
        React.createElement("div", { className: "content" },
          React.createElement("div", null, "Banner"),
          React.createElement("ul", null, 
            React.createElement("li", null, "test1"),
            React.createElement("li", null, "test2"),
            React.createElement("li", null, "test3"),
          )
        ),
        React.createElement("div", { className: "footer"}, "Footer")
      )
      console.log(element);
      return element
    }
  }

  const root = ReactDOM.createRoot(document.querySelector("#root"))
  root.render( React.createElement(App, null) )

</script>

</body>
</html>
